<template>
	<view class="page">
		<view class='order-tab-box'>
			<view class='order-tab' :class="tab_index == -2 ? 'order-tab-current' : ''" @tap='tab_click' data-index="-2">全部</view>
			<view class='order-tab' :class="tab_index == -1 ? 'order-tab-current' : ''" @tap='tab_click' data-index="-1">待付款</view>
			<view class='order-tab' :class="tab_index == 0 ? 'order-tab-current' : ''" @tap='tab_click' data-index="0">待收货</view>
			<view class='order-tab' :class="tab_index == 1 ? 'order-tab-current' : ''" @tap='tab_click' data-index="1">已完成</view>
			<view class='order-tab' :class="tab_index == 2 ? 'order-tab-current' : ''" @tap='tab_click' data-index="2">已取消</view>
		</view>
		<view class="order-tab-box-bg"></view>
		<view class='order-list-box'>
			<scroll-view scroll-y @scrolltolower="loadMore">
				<view class='order-list'  v-for="(item,index) in orderData" :key="index">
					
					<view class='order-status order-common' v-if="item.pay_status == 0">
						<view class='order-apply' v-if="item.order_state == 8">(已申请售后)</view>
						<view class='order-apply' v-else-if="item.order_state == 7">（已取消）</view>
						<view v-else>未支付</view>
					</view>
					<view class='order-status order-common' v-else-if="item.pay_status == 1">
						已支付
					</view>
					
					<view class='good'>
						<view class='lease content-box'>
								<view class='lease-img'>
									<image :src='item.thumb'></image>
								</view>
								<view class='lease-info'>
									<view class='lease-title'>{{item.goods_names}}</view>
									
								</view>
								<view class='lease-price'>
									<view class='lease-now'>¥{{item.totalPrice}}</view>
									<view class='lease-num font-color-hs'>x{{item.number}}</view>
								</view>
								<navigator open-type="navigate" :url="'/pages/user/discount_handle?team_id='+item.team_id">
									<view class='order-handle dopay'>操作</view>
								</navigator>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="m-loading" v-if="bIsShowLoading">
		    <image src="../../static/images/loading.gif" mode="widthFix"></image>
			
		    <text>加载中</text>
		</view>
		<view class="m-no-data" v-if="showNodata">
			<image src="../../static/images/no_order.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import hl from '../../common/common.js';
	export default {
		data() {
			return {
				tab_index: -2,	// 显示头部内容索引
				page: 1,	// 当前页数
				totalPages: 1,	// 页数总数
				orderData: [],	// 订单数据
				loadtype: 'normal',	// 加载数据方式
				bIsShowLoading: false,
				route_key: '2',
				tabbar_index: 0,
				showNodata: false,
			}
		},
		onLoad() {
			 this.get_order_list({type: this.tab_index});
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.page = 1;
			this.totalPages = 1;
			this.loadtype = 'normal';
			this.get_order_list({type: this.tab_index});
		},
		// 上拉加载
		onReachBottom(){
			this.loadMore()
		},
		methods: {
			// 申请售后
			apply(order_id){
				uni.navigateTo({
					url: '/pages/jewel/order/order_apply?order_id=' + order_id
				})
			},
			// 获取订单列表			
			get_order_list(data){
				let that = this;
				that.bIsShowLoading = true;
				if(that.page <= that.totalPages){
					data.page = that.page;
					hl.post('order/discountOrderList',data,false,function(res){
						that.bIsShowLoading = false;
						if(res.data.total_pages == 0) {
							that.showNodata = true;
						}
						if (!res.data.data.length) {
							that.orderData = ''
							return false;
						}
						if (that.loadtype == "plus") { // 上拉加载
							that.orderData = that.orderData.concat(res.data.data);
						} else {
							that.orderData = res.data.data;
							that.totalPages = res.data.total_pages;
							uni.stopPullDownRefresh();
						}
					});
				}else{
					that.bIsShowLoading = false
				}
			},
			// 选择显示的内容 
			tab_click(e){
				let index = e.currentTarget.dataset.index;
				if(index != this.tab_index) {
					this.page = 1;
					this.totalPages = 1;
					this.loadtype = 'normal';
					this.tab_index = index;
					this.showNodata = false;
					this.get_order_list({type: index});
				}
			},
			handle_order(order_id, type, url){
				let that = this;
				let text = type == '1' ? '确认要取消订单吗？': '确认已收到货了吗？';
				let sendurl = 'order/' + url;
				uni.showModal({
					title: '提示',
					content: text,
					success: function (res) {
						if (res.confirm) {
							hl.post(sendurl, {order_id: order_id}, true, function (res){
								let resdata = res.data;
								hl.showToast(resdata.msg);
								setTimeout(function (){
									that.get_order_list({type: that.tab_index, page: that.page});
								}, 1000);
							})
						}
					}
				})
			},
			loadMore(){
				this.page++;
				this.loadtype = 'plus';
				this.get_order_list({type: this.tab_index, page: this.page});
			}
		}
	}
</script>
<style>
	.order-tab-box {
		height: 90rpx;
		width: 100%;
		background: #f8f8f8;
		display: flex;
		display: -webkit-flex;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}
	.order-tab-box-bg{
		height: 90rpx;
		width: 100%;
	}
	.order-tab {
		height: 100%;
		line-height: 90rpx;
		flex: 1;
		-webkit-flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #666
	}

	.order-tab-current {
		color: #bea374;
		height: 88rpx;
		border-bottom: 1rpx solid #bea374;
		width: auto;
	}

	.order-list-box {
		width: 100%;
		height: 100%;
		overflow: hidden;
		padding-bottom: 40rpx;
	}

	.order-list {
		width: 95%;
		border: 2rpx solid #ececec;
		background: #fff;
		margin: 0 auto;
		margin-top: 14rpx;
		position: relative;
	}
	.product_down{
		background: url(../../static/images/jewel/product_down.png) no-repeat;
		background-size: 100%;
		width: 135rpx;
		height: 135rpx;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
	}
	.order-common {
		height: 84rpx;
		width: 100%;
		background: #f6f6f6;
		line-height: 84rpx;
		font-size: 28rpx;
		color: #bea374;
		text-indent: 22rpx;
		border-bottom: 1rpx solid #ececec
	}

	.order-mer {
		background: #fff;
		color: #3c3c3c;
		height: 97rpx;
		line-height: 97rxp;
	}

	.good {
		overflow: hidden;
		padding: 15upx 0;
		position: relative;
		padding-bottom: 40upx;
	}

	.lease {
		height: 100%;
		overflow: hidden;
		width: 95%;
		margin: 0 auto;
	}

	.lease-img {
		float: left;
		width: 144rpx;
		height: 144rpx;
		border: 1px solid #c8c8c8;
		margin-right: 21rpx;
	}

	.lease-img image {
		width: 100%;
		height: 100%
	}

	.lease-info {
		width: 370rpx;
		float: left;
		font-size: 26rpx;
		overflow: hidden;
	}

	.lease-title {
		height: 76rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.lease-attr {
		height: 68rpx;
		overflow: hidden;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	.lease-price {
		float: right;
		font-size: 26rpx;
	}

	.lease-num {
		margin-top: 14rpx;
	}

	.lease-market-price {
		text-decoration: line-through;
	}

	.lease-now {
		color: #666
	}

	.font-color-hs {
		color: #999;
	}

	.order-handle-box {
		height: 25rpx;
		width: 100%;
		font-size: 26rpx;
	}

	.order-handle {
		height: 50rpx;
		width: auto;
		padding: 0 15rpx;
		border: 1rpx solid #999;
		text-align: center;
		line-height: 50rpx;
		border-radius: 5rpx;
		color: #6c6c6c;
		float: right;
		margin-right: 20rpx;
		margin-top: 13rpx;
	}

	.dopay {
		color: #fff;
		background: linear-gradient(to right, #f3587c, #ff7d5d);
		border: none;
		height: 53rpx;
		line-height: 52rpx;
		font-size: 26upx;
		position: absolute;
		bottom: 20upx;
		right: 0;
	}

	.order-apply {
		display: inline-block;
		color: green
	}
	.m-no-data image{
		width: 100%;
		height: 100%;
		margin-top: 1px;
	}
</style>
